<template>
  <page-main>
    <div class="map" id="coordinates" ref="basicMapbox" style="height:500px;"></div>
  </page-main>

</template>
<script>
import mapboxgl from 'mapbox-gl';
export default {
  name: "home",
  data() {
    return {
     
    };
  },
  methods:{
    init () {
        mapboxgl.accessToken = 'pk.eyJ1Ijoic25zcXNzIiwiYSI6ImNrZ2oxbWtqMTAzNnAyeXFwMDAzdmp2YTAifQ.AuaHmI9j-_VbOYxUSJACQw' // 申请的key
        var coordinates = document.getElementById('coordinates');
        // debugger
        const map = new mapboxgl.Map({
          container: this.$refs.basicMapbox,
          style: 'mapbox://styles/mapbox/streets-v12',
          center: [-96, 37.8], // 设置地图中心
          zoom: 4,  // 设置地图比例
          // color: "#FFFFFF",
          // draggable: true
        })
        
        const popup = new mapboxgl.Popup({ closeOnClick: false })
        .setLngLat([-96, 37.8])
        .setHTML('<h1>Hello World!</h1>')
        .addTo(map);
    },
  },
  mounted() {
    this.init()
  },
}
</script>
<style scope>
.map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
